<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!--vue前端js框架-->
	<link rel="stylesheet" href="css/index.css"> <!-- 放哪无所谓 -->
	<script src="js/vue.js"></script>
	<!-- axios用来向后端发送请求-->
	<script src="js/axios.js"></script>
	<script src="js/elementui.js"></script>
	<script src="js/common.js"></script>
</head>

<body>
	<div id="app">
		<el-container>
			<el-header>Header <i style="margin-left: 1000px;" @click="back">退出登录</i></el-header>
			<el-container>
				<el-aside width="200px">
					<el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick" default-expand-all>
							<span class="custom-tree-node" slot-scope="{ node, data }">
								<span><i :class="data.iconcls"></i>{{ node.label }}</span>
							</span>
							
					</el-tree>
					
				</el-aside>
				<el-main>
					<iframe :src="src" frameborder="0px" style="width: 100%;height: 100%;"></iframe>
				</el-main>

			</el-container>

		</el-container>

	</div>
</body>
<script>
	var app = new Vue({
		el: '#app',
		data: {//数据存储的地方
			src: "",
			treedata: [],
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			token: window.localStorage.getItem("token")
		},
		methods: {//方法
			back() {
				if (confirm("确定退出登录吗？")) {
					window.localStorage.removeItem("token")
					location.href = "login.html"
				}
			},
			handleNodeClick(data) {
				this.src = data.href
			},
			init() {
				console.log(this.token)
				let that = this
				axios.get(HTTPPATH + "selectAllbyuser?token=" + this.token).then((result) => {
					console.log(result.data.data.menuinfoList);

					let s = arrayToTree(result.data.data.menuinfoList)
					console.log(s)
					that.treedata = s
				})
			}
		}, created() {//创建后
			//     axios.get("http://localhost:8082/db137/LoginUser").then((result)=>{
			//         console.log(result.data.menuList);
			//         this.treedata=result.data.menuList
			// })
			this.init()
		}
	})
</script>
<style>
	* {
		margin: 0%;
		padding: 0%;
	}

	.el-header {
		/*上面*/
		border-bottom: 1px solid #dda7ec;
		background: linear-gradient(to right, #45f3ff, #45f3ff);

		/* 从中心向外的径向渐变，指定位置 */
	}

	.el-aside {
		/*左边*/
		border-right: 1px solid #dda7ec;
		position: absolute;
		top: 60px;
		bottom: 0px;
	}

	.el-main {
		/*右边*/
		/* border: 5px solid blue; */
		position: absolute;
		left: 200px;
		right: 0px;
		top: 60px;
		bottom: 0px;
		padding: 0px;
	}
</style>

</html>